<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>项目管理</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
   		<link href="/resources/src/css/paginate.css" rel="stylesheet">
		<link href="/resources/src/css/projects-manage.css" rel="stylesheet">
		<script src="/resources/src/js/jquery-1.9.1.min.js"></script>
		<script>
       		$(function(){
		       	//项目导航收起、展开
				(function(){
					
					var $fold=$("[data-toggle='fold']");
		       		var aHeight=[];
		       		
					//获取高度,并隐藏所有的fold
		       		$.each($fold, function(i) {
		       			aHeight.push($fold.eq(i).parent().innerHeight());
		       			$fold.eq(i).parent().css("overflow","hidden");
		       			if($fold.eq(i).attr("fold-hidden")!=="false"){
		       				$fold.eq(i).parent().css("height","51px");
		       			}else{
		       				$fold.eq(i).find(".iconfold").addClass("rotate");
		       			}
		       			$fold.eq(i).on("click",function(){
			       			slideToggle($(this).parent(),aHeight[i]);
			       		});
		       		});

		       		//折叠切换函数
		       		function slideToggle(el,h){
		       			var val=el.height();
			       		if(val>51) {
			       			el.animate({height:'51px',overflow:'hidden'},500);
			       			el.find(".iconfold").removeClass("rotate");
			       		}
			       		else {
			       			el.animate({height:h+'px'},500);
			       			el.find(".iconfold").addClass("rotate");
			       		}
		       		};
		       		
		       })();
       		})
        </script>
	</head>
	<body class="sticky-header left-side-collapsed">
		<jsp:include page="../common/left-slide.jsp" flush="true">
	        <jsp:param name="pageHeader" value="projectHeader" />
	    </jsp:include>
		<div class="main-content">
			<jsp:include page="../common/header-start.jsp" />
        	<div class="main">
        		<!--左侧边项目导航栏-->
        		<div class="left-aside">
        			<div class="aside-wrapper">
						<jsp:include page="../common/project-manage-left-investor.jsp" />
        			</div>
        		</div>
        		<!--右侧边正文内容-->
                <div class="right-box text-center">
					<div class="right-header text-left clearfix">
						<div class="pull-left title"><span>项目管理</span></div>
						<div class="pull-left date">
							<input type="text" name="search" id="search" placeholder="输入项目名/团队信息"><i class="icon-search iconfont icon-sousuo-sousuo"></i>
						</div>
						<div class="pull-left clearfix">
							<a class="btn-block invitation btn-active text-center" onclick="createPro()"><i class="iconfont icon-tianjia"></i>&nbsp;添加</a>
						</div>
					</div>
					<!--条件筛选-->
					<div class="condition-filter text-left">
						<c:if test="${user.type==2 }">
							<div id="parentDiv" style="display: none;">
								<div class="area filter-item clearfix" id="area">
									<div class="pull-left"><b>地&nbsp;&nbsp;&nbsp;区：</b></div>
										<span class="active" data-value='0'>全部</span>
										<c:forEach items="${parentUser.userAreaList }" var="area">
											<span data-value='${area.area.id }'>${area.area.name }</span>
										</c:forEach>
								</div>
								<div class="business filter-item clearfix" id="field">
									<div class="pull-left"><b>行&nbsp;&nbsp;&nbsp;业：</b></div>
										<span  class="active" data-value='0'>全部</span>
										<c:forEach items="${parentUser.userFieldList }" var="usf">
											<span data-value='${usf.filed.id }'>${usf.filed.fieldName }</span>
										</c:forEach>
								</div>
							</div>
						</c:if>
						<div id="ownDiv">
							<div class="area filter-item clearfix" id="area">
								<div class="pull-left"><b>地&nbsp;&nbsp;&nbsp;区：</b></div>
									<span class="active" data-value='0'>全部</span>
									<c:forEach items="${user.userAreaList }" var="area">
										<span data-value='${area.area.id }'>${area.area.name }</span>
									</c:forEach>
									<i id="manage" data-toggle="modal" data-target="#area-modal">管理<small class="iconfont icon-control-arr-copy-copy"></small></i>
							</div>
							<div class="business filter-item clearfix" id="field">
								<div class="pull-left"><b>行&nbsp;&nbsp;&nbsp;业：</b></div>
									<span class="active" data-value='0'>全部</span>
									<c:forEach items="${user.userFieldList }" var="usf">
										<span data-value='${usf.filed.id }'>${usf.filed.fieldName }</span>
									</c:forEach>
									<i id="manage" data-toggle="modal" data-target="#business-modal">管理<small class="iconfont icon-control-arr-copy-copy"></small></i>
							</div>
						</div>
						<div class="round filter-item clearfix" id="round">
							<div class="pull-left"><b>轮&nbsp;&nbsp;&nbsp;次：</b></div>
								<span class="active" data-value='0'>全部</span>
								<c:forEach items="${roundList }" var="round">
									<span data-value='${round.id }'>${round.name }</span>
								</c:forEach>
						</div>
						<div class="fold">
							<div class="priority filter-item clearfix" id="unit">
								<div class="pull-left"><b>等&nbsp;&nbsp;&nbsp;级：</b></div>
									<span class="active" data-value='0'>全部</span>
									<c:forEach items="${unitList }" var="unit">
										<span data-value='${unit.id }'>${unit.name }</span>
									</c:forEach>
							</div>
						</div>
						<div class="more">
							<p value="0">显示全部选项<i class="iconfont icon-arrow-down"></i></p>
						</div>
					</div>
					<!--地区管理模态框-->
					<div class="modal fade" id="area-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-header">
									<h4 class="modal-title text-center">地区管理</h4>
								</div>
								<div class="modal-body">
									<div class="hot text-left">
										<div class="hot-title">热门地区</div>
										<div class="hot-bd">
											<div class="hot-item clearfix" data-liffect="bounceIn"></div>
											<a class="change-batch pull-right">换一批</a>
										</div>
									</div>
					            	<div class="item clearfix">
					            		<input type="text" id="search-area" placeholder="请输入关键字搜索">
					            	</div>
					            	<div id="select-area" class="item clearfix text-left">
					            	</div>
					            </div>
					            <div class="modal-footer">
					            	<div class="selected clearfix">
					            		<span class="handing pull-left">已选择：</span>
										<c:forEach items="${user.userAreaList }" var="userArea">
					            			<span class="pull-left"><i class="item-name" data-value="${userArea.area.id }">${userArea.area.name }</i><i class="iconfont icon-shanchu del"></i></span>
										</c:forEach>
					            	</div>
					                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
					                <button type="button" class="btn btn-primary confirm">保存</button>
					            </div>
							</div>
						</div>
					</div><!--modal end-->
					<!--行业管理模态框-->
					<div class="modal fade" id="business-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-header">
									<h4 class="modal-title text-center">行业管理</h4>
								</div>
								<div class="modal-body">
									<div class="hot text-left">
										<div class="hot-title">热门行业</div>
										<div class="hot-bd">
											<div class="hot-item clearfix" data-liffect="bounceIn">
											</div>
											<a class="change-batch pull-right">换一批</a>
										</div>
									</div>
					            </div>
					            <div class="modal-footer">
					            	<div class="selected clearfix">
					            		<span class="handing pull-left">已选择：</span>
										<c:forEach items="${user.userFieldList }" var="userField">
					            			<span class="pull-left"><i class="item-name" data-value="${userField.filed.id }">${userField.filed.fieldName }</i><i class="iconfont icon-shanchu del"></i></span>
										</c:forEach>
					            	</div>
					                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
					                <button type="button" class="btn btn-primary confirm">保存</button>
					            </div>
							</div>
						</div>
					</div><!--modal end-->
					<!--正文内容-->
					<div class="content">
						<div class="container projects">
							<div class="row" id="dataList">	
								<!--没有项目时，提示无项目-->
								<c:if test='${fn:length(pages.records) <=0}'>
									<div class='pro-null'>
										<div>
											<img src='/resources/src/images/center003.png' />
											<p>暂无项目</p>
										</div>
									</div>
								</c:if>
								<!--显示具体项目-->
								<c:if test='${fn:length(pages.records) > 0}'>
									<c:forEach items="${pages.records }" var="pro">
										<div class="projects-item col-sm-12 col-md-6 col-lg-4" data-value="${pro.id }">
											<div class="item-body bg-white clearfix">
												<span class="delPro iconfont icon-shanchu2" title="删除项目"></span>
												<%-- <c:if test="${user.id == pro.userId }">
												</c:if> --%>
												<div class="item clearfix">
													<a href="/projects/projectDetail/${pro.id }" target="_blank">
														<div class="item-logo pull-left">
															<c:if test="${pro.logo!=null && pro.logo!='' }">
																<img src="${pro.logo }"/>
															</c:if>
															<c:if test="${pro.logo==null || pro.logo=='' }">
																<div class="first-word">${fn:substring(pro.name, 0, 1)}</div> 
															</c:if>
														</div>
													</a>
													<a  class="project-item-name pull-left" href="/projects/projectDetail/${pro.id }" target="_blank">${pro.name }</a>
												</div>
												<div class="row icon-group">
													<div class="col-xs-4 no-padding text-left"><i class="iconfont icon-diqu"></i>${pro.area.name }</div>
													<div class="col-xs-4 no-padding text-center"><i class="iconfont icon-shuju"></i>${pro.round.name }</div>
													<div class="col-xs-4 no-padding text-right"><i class="iconfont icon-shuju1"></i>${pro.money }万</div>
												</div>
											</div>
											<div class="item-footer" style="padding:0 15px;">
												<div class="row bg-white" style="padding:15px 0;">
												   <div class="col-xs-6 text-left userProgress_flag" data-value='${pro.id }'>
												   		<c:if test="${pro.progressId != 0 }">
														   	 <span data-value='${pro.userProgress.id }' class="btn-progress" data-toggle="modal" data-target="#now-progress-modal">${pro.userProgress.name }</span>
												   		</c:if>
												   		<c:if test="${pro.progressId == 0 }">
												   			 <span data-value='0' class="btn-progress" data-toggle="modal" data-target="#now-progress-modal">选择进度</span>
												   		</c:if>
												   </div>
												   <div class="col-xs-6 text-right unit_flag" data-value='${pro.id }'>
												   <c:if test="${pro.unit ==1 }">
												     <span data-value='1' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">S级</span>
												   </c:if>
												   <c:if test="${pro.unit ==2 }">
												   	 <span data-value='2' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">A级</span>
												   </c:if>
												   <c:if test="${pro.unit ==3 }">
												   	 <span data-value='3' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">B级</span>
												   </c:if>
												   <c:if test="${pro.unit ==4 }">
												   	 <span data-value='4' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">C级</span>
												   </c:if>
												   <c:if test="${pro.unit ==0 }">
												   	 <span data-value='0' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">选择等级</span>
												   </c:if>
												   </div>
												   <%-- <c:if test="${user.type==1 ||pro.userId != user.id }">
													   <div class="col-xs-4 text-right follow_flag" data-value='${pro.id }'>
													   	<span class="btn-follow" data-toggle="modal" data-target="#current-follow-modal">
													   		${fn:length(pro.proFollowList)>0?pro.proFollowList[0].user.userName:"请选择"}
													   	</span>
													   	<c:forEach items="${pro.proFollowList }" var="followList">
													   		<input type="hidden" value="${followList.user.id }" data-value="${followList.user.userName }">
													   	</c:forEach>
													   </div>
												   </c:if> --%>
												</div>
											</div>	
										</div>		
									</c:forEach>
								</c:if>
							</div>
							<!--分页-->
							<!--pagination start-->
							<c:if test='${fn:length(pages.records) <=0}'>
								<div id="pagination" style="display:none;"></div>
							</c:if>
							<c:if test='${fn:length(pages.records) >0}'>
								<div id="pagination"></div>
							</c:if>
							<!--pagination end-->
						</div>
					</div>
					<!--非跟进人提示模态框-->
					<div class="modal fade" id="no-permission-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<input type="hidden" value="" id="del_prpgrass"/>
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-header">
									<h4 class="modal-title text-center">调整进度</h4>
								</div>
								<div class="modal-body">
									<div class="text-tip">你不是该项目的跟进人，无法调整项目进度</div>
								</div>
								<div class="modal-footer">
										<button type="button" class="btn btn-primary confirm" data-dismiss="modal">确认</button>
								</div>
							</div>
						</div>
					</div>
					<!--删除项目模态框-->
					<div class="modal fade" id="del-project-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-body">
									<div class="text-tip">是否确认删除该项目？删除后项目将无法恢复。</div>
								</div>
								<div class="modal-footer">
									<p>
										<button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary confirm" data-dismiss="modal">确认</button>
									</p>
								</div>
							</div>
						</div>
					</div>
                </div>
           </div>
       </div>
       
	    <!--分页  -->
	    <input type="hidden" id="pageNo" name="pageNo" value="${pages.current }"/>
	    <input type="hidden" id="pageSize" name="pageSize" value="${pages.size }"/>
	    <input type="hidden" id="totalCount" name="totalCount" value="${pages.total }"/>
	    <input type="hidden" id="totalPages" name="totalPages" value="${pages.pages }"/>
	    <input type="hidden" id="areaId" name="areaId" value="${query.areaId }"/>
	    <input type="hidden" id="roundId" name="roundId" value="${query.roundId }"/>
	    <input type="hidden" id="fieldId" name="fieldId" value="${query.fieldId }"/>
	    <input type="hidden" id="unitId" name="unitId" value="${query.unitId }"/>
	    <input type="hidden" id="progressId" name="progressId" value="${query.progressId }"/>
	    <input type="hidden" id="keyWorld" name="keyWorld" value="${query.keyWorld }"/>
	    <!--<input type="hidden" id="userType" name="userType" value="0"/>-->
	    <input type="hidden" id="dataType" name="dataType" placeholder="用于辨别个人数据与机构数据" value="0"/>
	    <input type="hidden" id="userId" value="${user.id }" />
	    <input type="hidden" id="userType" placeholder="账户类型" value="${user.type }" />
	    <!--分页结束  -->

       <script src="/resources/src/js/jquery.nicescroll.js"></script>
       <script src="/resources/src/js/main.js"></script>
	   <script src="/resources/src/js/bootstrap.min.js"></script>
	   <script src="/resources/src/js/jquery.paginate.js"></script>
	   <script src="/resources/src/js/project-manager-left.js"></script>
	   <script src="/resources/src/js/projects-manager.js"></script>	
       <!--模态框-->
       <jsp:include page="../common/modal.jsp" />
       <script>
       		$(function(){
				
				(function(){
					/*---------------------------------------------
					 * 创建标签组（tagGroups）对象原型。
					 * 参数对象obj中属性的含义：
					 * 1、el为触发更改标签内容的元素
					 * 2、receiver为接收标签的元素（一般为这些标签的父元素）
					 * 3、count为标签的数量
					 * 4、data为数据源
					 ---------------------------------------------*/
					function tagGroups(obj){
						//基本参数
						this.el=obj.el;
						this.receiver=obj.receiver;
						this.count=0;
						this.num=obj.count;
						this.data=obj.data;
						
						//初始化函数
						this.init=function(){
							var len,html="";
							len=(this.count+1)*this.num;
							len=len<this.data.length? len : this.data.length;
							for(var i=this.count*this.num; i<len;i++){
								html+="<span data-value="+this.data[i].id+">"+this.data[i].name+"</span>";
							}
							$(this.receiver).html(html);
						    //循环显示
						    this.count=len<this.data.length? (this.count+1) : 0;
						};
						
						//切换函数
						this.change=function(){
							var that=this;
							$(that.el).click(function(){
								that.init();
							});
						};
						
						//执行
						this.init();
						this.change();
					};
					
					/*热门地区管理*/
					
					//热门地区数据
	       			var hotArea=[
						{id:1,name:"北京"},
						{id:2,name:"上海"},
						{id:3,name:"广州"},
						{id:4,name:"深圳"},
						{id:5,name:"杭州"},
						{id:6,name:"厦门"},
						{id:17,name:"西安"},
						{id:19,name:"成都"},
						{id:20,name:"武汉"},
						{id:26,name:"苏州"},
						{id:9,name:"无锡"},
						{id:8,name:"南京"},
						{id:18,name:"重庆"},
						{id:14,name:"天津"},
						{id:21,name:"长沙"},
						{id:11,name:"济南"},
						{id:12,name:"青岛"},
						{id:22,name:"佛山"},
						{id:10,name:"合肥"},
						{id:15,name:"大连"},
						{id:25,name:"贵阳"},
						{id:9,name:"昆明"},
					];
					
					//热门地区
					var hotAreaGroups=new tagGroups({
						el:"#area-modal .change-batch",
						receiver:"#area-modal .hot-item",
						count:13,
						data:hotArea
					});
					
					/*热门行业管理*/
					//热门行业数据
					var hotBusiness=[
						{id:1,name:"人工智能"},
						{id:2,name:"新零售"},
						{id:3,name:"医疗健康"},
						{id:4,name:"教育"},
						{id:5,name:"智能硬件"},
						{id:6,name:"消费升级"},
						{id:7,name:"区块链"},
						{id:8,name:"共享经济"},
						{id:9,name:"泛娱乐"},
						{id:10,name:"电商"},
						{id:11,name:"物流"},
						{id:12,name:"旅游"},
						{id:13,name:"餐饮"},
						{id:14,name:"互联网金融"},
						{id:15,name:"体育运动"},
						{id:16,name:"社交"},
						{id:17,name:"本地生活"},
						{id:18,name:"交通出行"},
						{id:19,name:"企业服务"},
						{id:20,name:"房地产"},
						{id:21,name:"农业"},
					];
					
					//热门地区
					var hotBusinessGroups=new tagGroups({
						el:"#business-modal .change-batch",
						receiver:"#business-modal .hot-item",
						count:13,
						data:hotBusiness
					});

				})();
	
       		});
       </script>
	</body>
</html>